<template>
	<view class="content">
		<u-sticky offset-top="0" bgColor="#fff">
				<u-tabs ref="tab" :list="tablist" :scrollable="false" :current="tabcurrent" @click="tabsclick"  :itemStyle="tabstyle"></u-tabs>
		</u-sticky>
		<view class="list">
			<view class="lsititem" v-for="i in 20" :key="i" @click="clicklist(i)">
				<view class="itemleft">
					<up-image class="infoimg" width="180rpx" height="180rpx" mode="scaleToFill"  src="https://tenfei03.cfp.cn/creative/vcg/800/new/VCG211454662865.jpg" ></up-image>
				</view>
				<view class="itemright">
					<view class="rightti">
						健康小白科,驱虫做到位,猫咪无虫更健康
					</view>
					<view class="righttxt">
						University of Northern Iowa
						WebUNI’s enrollment tops 9,000 students, incoming freshman students up 8%. The University of Northern Iowa is a top public university in Cedar Falls, Iowa, offering undergraduate 
					</view>
				</view>
			</view>
		</view>
		<view class="fotinput">
			 <up-input
			    placeholder="请输入您的问题"
			    border="surround"
			    v-model="queryval"
			    @change="query"
			  ></up-input>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				tabcurrent:0,
				queryval:'',
				tablist: [{
						name: '新手专区',
					},
					{
						name: '健康养宠小课堂',
					},
				],
				tabstyle:{
					width:'300rpx',
					height: '88rpx'
				}
			}
		},
		onLoad(v) {
			console.log(v,"vvvv23")
			setTimeout(()=>{
				this.tabcurrent=0
			})
		},
		methods: {
			tabsclick(v){
				this.tabcurrent=v.index
				console.log(v, 'click')
			},
			clicklist(v){
				uni.navigateTo({
					url:"/petknowledgeinfo/webview",
				})
			}
		},
	}
</script>

<style lang="scss">
	.content{
		padding: 0rpx 24rpx 0px 24rpx;
	}
	.lsititem{
		display: grid;
		grid-template-columns: 180rpx auto;
		grid-gap: 0px 24rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #ccc;
	}
	.fotinput{
		position: sticky;
		top: 0rpx;
	}
	.list{
		min-height: calc(100vh - 200px);
		max-height: calc(100vh - 200px);
		overflow-y: auto;
	}
	.rightti{
		font-size: 34rpx;
	}
	.righttxt{
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		box-orient: vertical;
	}
</style>